<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>地图投影转换</title>
    <script src="../../../assets/ol/v5.3.0/ol.js"></script>
    <script src="../../../assets/script/jquery-2.1.1.min.js"></script>
    <script src="../../../assets/script/proj4.js"></script>
    <link rel="stylesheet" href="../../../assets/ol/v5.3.0/ol.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #map {
            position: absolute;
            left: 0;
            width: 48%;
            height: 100%;
        }

        #map2 {
            position: absolute;
            left: 50%;
            width: 48%;
            height: 100%;
        }

        .crs-tip {
            position: absolute;
            top: 20px;
            background-color: #000000ab;
            padding: 5px;
            border-radius: 5px;
            color: #fff;
        }

        .map-left {
            left: 25%;
            transform: translateX(-25%);
        }

        .map-right {
            left: 75%;
            transform: translateX(-25%);
        }
    </style>
</head>

<body>
<div id="map" title="地图显示"></div>
<div id="map2" title="地图显示"></div>
<div class="crs-tip map-left">投影坐标系【EPSG:3857】</div>
<div class="crs-tip map-right">投影坐标系【ESRI:53009】</div>
<script src="../../../assets/script/v5.3.0-common.js"></script>
</body>
<script>
    loadTdtMapLayer();
    // 定义投影
    proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +
        '+b=6371000 +units=m +no_defs');
    ol.proj.proj4.register(proj4)
    const sphereMollweideProjection = new ol.proj.Projection({
        code: 'ESRI:53009', //编号
        extent: [-9009954.605703328, -9009954.605703328, 9009954.605703328, 9009954.605703328], //范围
        worldExtent: [-179, -90, 179, 90] //世界经纬度范围
    });
    const transformMap = new ol.Map({
        target: 'map2',
        layers: [
            TDTImgLayer,
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: "../../../data/230000.geoJson",
                    format: new ol.format.GeoJSON()
                })
            })
        ],
        view: new ol.View({
            center: [11421771, 4288300],
            zoom: 5,
            projection: sphereMollweideProjection
        })
    })
    const graticule = new ol.Graticule({
        map: transformMap
    })
</script>

</html>